<template>
    <div class="header">
        <aside class="a1">
            <span><router-link to="/pc/home">首页-zzx书城</router-link></span>
        </aside>
        <aside class="a2">
            <aside>
                <label>你好!</label><button @click="dialogFormVisible= true;"><span>{{type}}</span></button>
            </aside>
            <el-dialog width="500px" title="用户登录" :visible.sync="dialogFormVisible" style="text-align: center;">
                <hr>
                <el-form v-model="user">
                    <el-form-item label="账号:" :label-width="formLabelWidth">
                        <el-input placeholder="请输入账号" v-model="user.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" :label-width="formLabelWidth">
                        <el-input placeholder="请输入密码" v-model="user.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-button @click="login()" type="primary" style="width: 380px;font-size: 16px;">登录</el-button>
                </el-form>
            </el-dialog>
        </aside>
        <router-link to="/">免费注册</router-link>
        <aside class="a3">
            <router-link to="/">| 我的购物车 |</router-link>
            <router-link to="/"> 我的订单 |</router-link>
        </aside>
        <div class="d1">
            <button @click="logout()">退出</button>
        </div>
        
    </div>
</template>

<script>
export default {
    name:'PCHeader',
    data(){
        return{
            type:'请登录',
            dialogFormVisible: false,
            formLabelWidth: '120px',
            user:{}
        }
    },
    methods:{
		login(){
			this.dialogFormVisible = false;
			this.$postkv('/api/login',this.user).then((resp)=>{
				let token = resp.data.data.token;
				window.localStorage.setItem("token",token);
				this.$get('/api/user/info').then((resp)=>{
					this.user=resp.data.data;
					console.log(this.user);
					
					window.localStorage.setItem("account",resp.data.data.account);
					window.localStorage.setItem("img",resp.data.data.img);
					window.localStorage.setItem("name",resp.data.data.name);
					window.localStorage.setItem("role",resp.data.data.role);
					this.$store.state.account = resp.data.data.account;
					this.$store.state.img = resp.data.data.img;
					this.$store.state.name = resp.data.data.name;
					this.$store.state.role = resp.data.data.role;
					
					this.$router.push('/pc/admin');
					})
					
					this.$message({
						 message:resp.data.msg,
						 type:'success',
					})
					
			})
		},
		logout(){
			window.localStorage.setItem("account",'');
			window.localStorage.setItem("img",'');
			window.localStorage.setItem("name",'');
			window.localStorage.setItem("role",'');
			this.$router.push('/pc')
		}
    }
}
</script>

<style scoped>
.header{
    width: 100%;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: linear-gradient(#DCDFE6,#E4E7ED);
}
.header a{
    color: #70b5fc;
}
.header .d1 button{
    color: #878787;
    border: none;
    background-color: #dbdbdb;
    font-size: 16px;
}
.header .a1{
    width: 200px;
    height: 50px;
    line-height: 50px;
    display: flex;
}
.header .a1 span a{
    color: #9c9c9c;
    margin-left: 10px;
    font-weight: 600;
}
.header .a2{
    width: 200px;
    margin-left: 25vw
}
.header .a2 aside label{
    color: #9c9c9c;
}
.header .a2 aside button{
    color: red;
    margin-left: 8px;
    font-size: 16px;
    border: none;
    background-color: #dbdbdb;
}
</style>
